<template>
	<view>
		<view class="buy-list_container">
			<view class="buy-list_row">
				<view class="goods-info">
					<view class="img">
						<image :src="orderInfo.originalImg | formatUrl"></image>
					</view>
					<view class="info">
						<view class="title">{{orderInfo.goodsName}}</view>
						<view class="spec">{{orderInfo.goodsBrief}} </view>
					</view>
					<view class="price-number">
						<view class="price">￥{{orderInfo.shopPrice|toFixed}}</view>
						<view class="number" style="text-align: right;"> x {{orderInfo.goodsNumber}}</view>
					</view>
				</view>
				<view class="number" v-if="!check">
					<view class="sub" @tap.stop="sub()">
						<view class="icon">&#xe6aa;</view>
					</view>
					<view class="input"> 
						<input type="number" v-model="orderInfo.goodsNumber" disabled />
					</view>
					<view class="add"  @tap.stop="add()">
						<view class="icon">&#xe656;</view>
					</view>
				</view>
				<!-- 提示-备注 -->
				<view class="order_info">
					<view class="order_info_tip" v-if="check" >
						<button class="action-btn" v-if="orderInfo.payStatus === '2' && orderInfo.orderStatus !== '5'" @click="checkoutOrder(orderInfo)">退换</button>
					</view>
					<view class="row"  @tap="show()">
						<view class="left">
							配送方式
						</view>
						<view class="right">
							{{orderInfo.shippingName}}
							<span class="right_content" style="justify-content: flex-end; color: #333;">运费￥{{(orderInfo.insure)|toFixed}}<i class="icon">&#xe62d;</i></span>
						</view>
					</view>
					<view class="row">
						<view class="left">
							是否开发票
						</view>
						<view class="right"  style="justify-content: flex-end; color: #333;">
							<switch v-if="!check" style="transform:scale(0.5)" color="#E80505" :checked="orderInfo.isnoInv === '1'" @change=isnoInvChange />
							<switch v-else disabled style="transform:scale(0.5)" color="#E80505" :checked="orderInfo.isnoInv === '1'" @change=isnoInvChange />
						</view>
					</view>
					<view class="row" v-show="orderInfo.isnoInv === '1'"  @tap="show('invoice')">
						<view class="left">
							发票内容
						</view>
						<view class="right" style="justify-content: flex-end; color: #333;">
							<span class="right_content"><i class="icon">&#xe62d;</i></span>
						</view>
					</view>
					<view class="row">
						<view class="left">
							订单备注
						</view>
						<view class="right">
							<input v-if="check" disabled :placeholder="orderInfo.remark" :value="leaveMsg"/>
							<input v-else  placeholder="选填,请先和商家协商一致" :v-model="leaveMsg"  @input="setLeaveMsg"/>
						</view>
					</view>
					<view class="order_info_tip">
						<span class="order_info_tip1">共{{orderInfo.goodsNumber}}件： </span>
						<span class="order_info_tip2">￥{{(orderInfo.shopPrice*orderInfo.goodsNumber + (orderInfo.insure ? orderInfo.insure : 8)) |toFixed}}</span>
					</view>
				</view>	
			</view>
		</view>
		<!-- 底部弹框 配送方式 -->
		<popup-layer ref="popupRef" :direction="'top'" >
			<view class="replacement_box" >
				<view class="replacement_box_title">配送方式</view>
				<scroll-view 
					:scroll-top="scrollTop"
					scroll-y="true"
					style="height: 100%;"
				>
					<view class="replacement_box_item" v-for="(item, index) in deliveries"  :key="index">
						<view class="replacement_box_text">{{item.shippingName}}</view>
						<!-- checkbox --> 
						<view class="checkbox-box" @tap="selected(item)">
							<view class="checkbox">
								<view :class="[orderInfo.shippingId === item.id ? 'on' : '']"></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<button type="primary" class="feedback-submit replacement_button" @tap="close" >关闭</button>
			</view>
		</popup-layer>
		<!-- 底部弹框 发票填写-->
		<popup-layer ref="popupRef1" :direction="'top'" >
			<view class="replacement_box" >
				<view class="replacement_box_title">发票信息</view>
				<!-- 	invoices[currentIndex] -->
				<view class="replacement_box_item">
					<view class="replacement_box_text">发票类型</view>
					<view class="replacement_box_right">
						<radio-group @change="radioChange" style="display: flex;margin: 20px 10px 10px;"> 
							<label style="display: flex;">
								<view>
									<radio color="#a2313e" value="个人":checked="invPayee === '个人'" />
								</view>
								<view>个人</view>
							</label>
							<label style="display: flex;">
								<view>
									<radio color="#a2313e" value="公司" :checked="invPayee === '公司'" />
								</view>
								<view>公司</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="replacement_box_item">
					<view class="replacement_box_text">发票抬头</view>
					<view class="replacement_box_right">
						<input v-if="invPayee === '个人'" placeholder="请输入准确的抬头名称" v-model="invPayee"  disabled/>
						<input v-if="invPayee !== '个人'" placeholder="请输入准确的抬头名称" v-model="invPayee"/>
					</view>
				</view>
				<view class="replacement_box_item" v-show="invPayee !=='个人'">
					<view class="replacement_box_text">税号</view>
					<view class="replacement_box_right">
						<input placeholder="请输入纳税人识别号" v-model="invCompanyCode"/>
					</view>
				</view>
				<view class="replacement_box_item">
					<view class="replacement_box_text">发票内容</view>
					<view class="replacement_box_right">
						<input placeholder="请输入发票内容" v-model="invContent"/>
					</view>
				</view>
				<button type="primary" class="feedback-submit replacement_button" @tap="close('invoice')" >完成</button>
			</view>
		</popup-layer>
	</view>
</template>

<script>
	import {  
		mapActions,
		mapState
	} from 'vuex'; 
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	export default {
		name: 'order-card',
		data() {
			return {
				ifshow: false, // 是否展示,
				timer: null,
				leaveMsg: '', // 用户留言
				// isnoInv: 0, // 	是否开发票，1开发票，0不开发票,
				// invType: '电子普通发票', // "发票类型",  目前只支持 电子普通发票
				invPayee: '个人', // "发票抬头", 
				invCompanyCode: '', // "公司信用编码", 
				invContent: '', // "发票内容"
				scrollTop: 0
			};
		},
		components: {
			popupLayer,
		},
		computed:{
			shippingName: function() {
				const item = this.deliveries.find(item => item.id === this.orderInfo.shippingId);
				return item && item.shippingName
			},
			orderInfos: function() {
				return this.$store.getters.orderInfos
			},
			orderInfo: function() {
				return this.$store.getters.orderInfos && this.$store.getters.orderInfos[this.index]
			},
		},
		props: {
			check:{
				type: Boolean,
				default: false,
			},
			deliveries: {
				type: Array,
				default: function () {
					return []
				}	
			},
			index: {
				type: Number,
				default: 0
			}
		},
		filters: {
			toFixed:function(x) {
				return parseFloat(x).toFixed(2);
			},
			formatUrl: function(url) {
				return url && url.indexOf('http') !== -1 ? url : 'http://106.13.76.109:8080/xsmall/sys/common/view/'+ url
			}
		},
		methods: {
			// 设置用户留言
			setLeaveMsg(e) {
				// 强制过滤掉表情包～
				this.orderInfo.leaveMsg = e.detail.value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");
				this.saveOrderInfo(this.index, this.orderInfo)
			},
			// 退货退款审核
			checkoutOrder(item) {
				console.log('item:', item)
				uni.navigateTo({
					url: `../replacement/replacement?orderId=${item.orderId || item.id}`
				})
			},
			show(type = 'delivery'){ // 底部弹窗弹出
				if (this.check) return false;
				if (type === 'delivery') {
					this.$refs.popupRef.show();
				} else {
					this.$refs.popupRef1.show();
				}
			},
			close(type = 'delivery'){ // 底部弹窗关闭
				if(type === 'delivery'){
					this.$refs.popupRef.close();
				} else {
					if (!this.invPayee ) {
						uni.showToast({
							icon: 'none',
							title: '发票抬头 为必填字段！',
						})
						return false;
					}
					if (this.invPayee !== '个人'&& !this.invCompanyCode) {
						uni.showToast({
							icon: 'none',
							title: '  公司税号  为必填字段！',
						})
						return false;
					}
					this.orderInfo.isnoInv =  '1';
					this.orderInfo.invType = this.invPayee === '个人' ? '1':'2';
					this.orderInfo.invPayee = this.invPayee;
					this.orderInfo.invCompanyCode = this.invCompanyCode;
					this.orderInfo.invContent =  this.invContent;
					this.saveOrderInfo(this.index, this.orderInfo)
					this.$refs.popupRef1.close();
				}
			},
			selected(item){
				this.orderInfo.shippingId = item.id
				this.orderInfo.insure = item.insure
				this.orderInfo.shippingName = item.shippingName
				this.saveOrderInfo(this.index, this.orderInfo)
				this.close();
			},
			// 减少数量
			sub(){
				if(this.orderInfo.goodsNumber<=1){
					return;
				}
				this.orderInfo.goodsNumber--
				this.saveOrderInfo(this.index, this.orderInfo)
			},
			// 增加数量
			add(){
				this.orderInfo.goodsNumber++;
				this.saveOrderInfo(this.index, this.orderInfo)
			},
			discard() {
				// 直接编辑数量～～
			},
			isnoInvChange() {
				if (this.check) return false;
				if (this.orderInfo.isnoInv === '1') {
					this.orderInfo.isnoInv = '0'
				} else{
					this.orderInfo.isnoInv = '1'
				}
				this.saveOrderInfo(this.index, this.orderInfo) 
			},
			radioChange(e) {
				if(e.detail.value === '个人'){
					this.invPayee = e.detail.value;
				} else {
					this.invPayee = ''
				}
			},
			// 合计
			...mapActions({
				setOrderInfo: 'SET_ORDER_INFO'
			}),
			// 保存订单的更改
			saveOrderInfo(index, item) {
				this.orderInfos[index] = item
				this.setOrderInfo({ orderInfo: this.orderInfos });
				this.$emit('countPrice', this.orderInfos) 
				this.$forceUpdate()
			},
		}
	}
</script>

<style scoped lang="scss">

@font-face {
	font-family: 'iconfont';
	src: url('../../css/font/iconfont.eot');
	src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
	url('../../css/font/iconfont.woff') format('woff'),
	url('../../css/font/iconfont.ttf') format('truetype'),
	url('../../css/font/iconfont.svg#iconfont') format('svg');
}
.icon {
	font-family:"iconfont" !important;
	font-size: 26upx;
	font-weight: 200;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
	cursor: pointer;
	color: #999;
	&:hover {
		color: #E80505;
	}
}
.buy-list_container {
	width: 100%;
	margin-top: 20upx;
	.buy-list_row{
		margin: 0 30upx;
		box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
		border-radius: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		.number{
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			.input{
				width: 60upx;
				height: 60upx;
				margin: 0 10upx;
				background-color: #f3f3f3;
				input{
					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-size: 26upx;
				}
			}
			.sub ,.add{
				width: 45upx;
				height: 45upx;
				background-color: #f3f3f3;
				border-radius: 5upx;
				.icon{
					font-size: 22upx;
					width: 45upx;
					height: 45upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.goods-info{
			width: 100%;
			display: flex;
			.img{
				width: 22vw;
				height: 22vw;
				border-radius: 10upx;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 10upx;
				image{
					width: 22vw;
					height: 22vw;
				}
			}
			.info{
				width: 100%;
				.title{
					width: 100%;
					font-size: 28upx;
				}
				.spec{
					font-size: 24upx;
					color: #666;
					display: flex;
					border-radius: 20upx;
				}
			}
			.price-number{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;
				font-size: 28upx;
				height: 40upx;
				.price{
					color: #333;
				}
				.number{
					display: flex;
					justify-content: center;
					align-items: center;
					color: #888;
				}
			}
		}
		.order_info {
			margin: 0upx 0px 0px 80upx;
			font-size: 24upx;
			.row{
				margin: 20upx 0;
				height: 40upx;
				display: flex;
				align-items: center;
				.left{
					font-size: 24upx;
					flex: 1;
					text-align: right;
					color: #555;
				}
				.right{
					margin-left: 40upx;
					color: #999;
					font-size: 24upx;
					flex: 3;
					display: flex;
					justify-content: space-between;
					input{
						color: #999;
						font-size: 24upx;
						flex: 1;
					}
					.right_content {
						display: flex;
						justify-content: flex-end;
						align-items: center;
					}
				}
			}
			.order_info_tip {
				display: flex;
				justify-content: flex-end;
				margin-top: 20upx;
				.action-btn{
					width: 160upx;
					height: 60upx;
					margin: 0;
					margin-left: 24upx;
					padding: 0;
					text-align: center;
					line-height: 60upx;
					font-size: $font-sm + 2upx;
					color: $font-color-dark;
					background: #fff;
					border-radius: 100px;
					&:after{
						border-radius: 100px;
					}
					&.recom{
						background: #fff9f9;
						color: $base-color;
						&:after{
							border-color: #f7bcc8;
						}
					}
				}
				.order_info_tip1 {
					color: #a7a7a7;
				}
				.order_info_tip2 {
					color:#E80505;
				}
			}
		}
		.detail{
			width: 86%;
			padding: 10upx 3%;
			margin: 30upx auto 20upx auto;
			box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
			border-radius: 20upx;
			.row{
				height: 60upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.nominal{
					font-size: 28upx;
				}
				.content{
					font-size: 26upx;
					color:#E80505;
				}
			}
		}
	}
}

.replacement_box {
	width: 100%;
	height: 800upx;
	display: flex;
	flex-direction: column;
	padding: 0upx 20upx 180upx;;
	box-sizing: border-box;
	.replacement_button {
		position: fixed;
		bottom: 0;
		width: 95%
	}
	.replacement_box_title {
		display: flex;
		align-items: center;
		font-size: 30upx;
		text-align: center;
		margin-top: 20upx;
		justify-content: center;
	}
	.replacement_box_item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ece7e7;
		padding: 20upx 0upx;
		&:last-child {
			border-bottom: 0px solid #ece7e7;
		}
		.replacement_box_text {
			flex: 1;
		}
		.replacement_box_right {
			color: #666;
			font-size: 26upx;
			display: flex;
			justify-content: flex-end;
			flex: 4;
			input {
				font-size: 26upx;
				width: 50%;
			}
		}
		.checkbox-box{
			display: flex;
			align-items: center;
			width: 30upx;
			height: 30upx;
			.checkbox{
				width: 30upx;
				height: 30upx;
				border-radius: 100%;
				border: solid 1upx #E80505;
				display: flex;
				align-items: center;
				justify-content: center;
				.on{
					width: 24upx;
					height: 24upx;
					border-radius: 100%;
					background-color:#E80505;
					align-self: center;
					justify-content: center;
				}
			}
			.text{
				font-size: 28upx;
				margin-left: 10upx;
			}
		}
	}
	.feedback-submit {
		box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4);
		margin: 20upx auto;
		height: 80upx;
		background-color:#E80505;
		color: #fff;
		justify-content: center;
		align-items: center;
		padding: 0;
		&:hover {
			background-color: #862732;
		}
	 }
}
</style>
